<template>
  <div>
<!--    <el-carousel :interval="1550" type="card" height="200px">-->
<!--      <el-carousel-item v-for="item in lists" :key="lists.item">-->
<!--        <h3 class="medium">-->
<!--          &lt;!&ndash;        {{ item.h }}&ndash;&gt;-->

<!--          <el-image  :src="item.img" style="width:100%;height: 100%;background-repeat: no-repeat;-->
<!--  background-size: cover;"/>-->
<!--        </h3>-->
<!--      </el-carousel-item>-->

<!--    </el-carousel>-->

    <el-row>
      <el-col v-for="(o, index) in list" :key="list.o" :span="7" :offset="index > 0 ? 2 : 0" style="margin-left: 30px;margin-top: 20px;">
        <el-card shadow="hover" :body-style="{ padding: '0px' }" >
<!--                  <img :src="o.head" class="image" /><br/>-->
<!--                  <el-image :src="o.head"></el-image><br/>-->
<!--                  <img src="static/img/img_12.png">-->
          <el-image  :src="o.head" style="width:200px;height: 200px;"/>
          <div style="padding: 14px">
            <div class="bottom">
              <time class="time"></time>
<!--              {{o.id}}-->
              <span style="letter-spacing:0px;display: inline" >{{o.name}}</span>
              <!--            <el-button type="text" class="button">图书详情</el-button>-->

              <el-collapse @change="handleChange" style="width: 65%">
                <el-collapse-item title="图书详情" name="1">
                  <div>
                    发行日期:{{o.date}}}<br>
                    书籍详情：{{o.brief}}<br>
                    创作背景:{{o.detail}}
                  </div>
                  <div>
                    发行状态:<span v-if="o.state==1" style="color: #5acdc9">已发行</span>
                    <span v-if="o.state==0">未发行</span>
                  </div>
                </el-collapse-item>
                <br>

                <span>图书剩余数量:{{o.surplus}}</span>
                <br>
                <el-button type="text" @click="show(o)">添加购物车</el-button>
              </el-collapse>
              <el-dialog title="图书购买" :visible.sync="dialogVisible" width="30%">
                <el-image :src="url" style="height: 200px;width: 150px"></el-image>
                <br>
                <!--              <el-button type="text" @click="dialogVisible1 = true">点击输入地址</el-button>-->
<!--                <el-select v-model="value" placeholder="请选择">-->
<!--                  <el-option-->
<!--                    v-for="item in options"-->
<!--                    :key="item.value"-->
<!--                    :label="item.label"-->
<!--                    :value="item.value">-->
<!--                  </el-option>-->
<!--                </el-select>-->
<!--                <el-select v-model="value" placeholder="请选择">-->
<!--                  <el-option-->
<!--                    v-for="item in options"-->
<!--                    :key="item.value"-->
<!--                    :label="item.label"-->
<!--                    :value="item.value">-->
<!--                  </el-option>-->
<!--                </el-select>-->
                <span>购买数量:</span>
                <el-input-number v-model="num" @change="handleChange(num)" id="ipt1" :min="0" ref="input1" :max="999" label="描述文字">
                </el-input-number>
                <br><br>
                {{id}}
                <span>单价:{{price}}</span>
                <br><br>总价钱:
                <input id="span1" v-model="span1" style="border: none" disabled> </input>
                <br><br>
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false;adds()">确定</el-button>
              </el-dialog>
            </div>
            <!--          <el-dialog-->
            <!--            title="提示"-->
            <!--            :visible.sync="dialogVisible1"-->
            <!--            width="30%"-->
            <!--            :before-close="handleClose1">-->
            <!--            <span>请输入省份<input></input></span><br>-->
            <!--            <span>请输入市区<input></input></span><br>-->
            <!--            <span>请输入详细地址<input></input></span>-->
            <!--            <span slot="footer" class="dialog-footer">-->
            <!--    <el-button @click="dialogVisible1 = false">取 消</el-button>-->
            <!--    <el-button type="primary" @click="dialogVisible1 = false">确 定</el-button>-->
            <!--  </span>-->
            <!--          </el-dialog>-->
          </div>

        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>

export default {
  name: "BookM2",
  data() {
    return {
      forderadd: {f_User: "", price: ""},
      input: '',
      span2: '',
      list: [],
      // frm1:{
      //   id:'',
      //   name:''
      // },
      id: '',
      lists: [],
      Form: {
        price: '', num: '', money: '', book: ''
      },
      dialogVisible: false,
      dialogVisible1: false,
      url: '',
      price: '',
      span1: '',
      num: 0,
      options: [{
        value: '北京', label: '北京'
      },
      ],
      value: ''

    }


  },


  created() {
    this.$http.post("/book/select").then(data=>{
      console.log(data)
      this.list=data;
      // this.frm1=data;
    }),
      this.$http.post("img/select").then(data=>{
      this.lists=data
    })
  },
  methods: {
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {})},
    handleClose1(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    show(aa){
      this.dialogVisible=true
      this.url=aa.head,
        this.price=aa.price;
      this.id=aa.id;
    },
    handleChange(num){
      let a=document.getElementById('span1');
      let b=this.price;
      let c=num*b;
      this.span1=c;
    },
    adds () {
      //alert(this.id)
      if(this.num!==0){
        this.$http.post('/book/select2',{book:this.id}).then(add=> {
          //this.surplus=add
         // alert(add)
          if (add>0&&this.num<=add) {
            this.$http.post('/fcart/upadd', {
              id: 0, fuser: this.$store.state.user.list.id,
              book: this.id, number: this.num, price: this.price * this.num
            }).then(add => {
              if (add > 0) {
                alert("操作成功");
                this.$router.push('/cart')
              } else {
                alert("购买失败")
              }
            })
          }else {
            alert("剩余图书数量不够")
          }
        })

      }else{
        alert("请至少购买一本图书")
      }


    }
  }


}

</script>

<style>
.time {
  font-size: 13px;
  color: #999;
}

.el-carousel__item h3 {
  /*background:url("/static/img/img_5.jpg");*/
  background-repeat: no-repeat;
  background-size: cover;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {

  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}


.bottom {
  margin-top: 13px;
  line-height: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.button {
  padding: 0;
  min-height: auto;
}

.image {
  width: 100%;
  display: block;
}
</style>
